<script lang="ts" setup>
import axios from 'axios'
import { IResponse, TChannelArr } from '../types/index'
import { Ref, getCurrentInstance, ref } from 'vue';
import { useChannelStore } from '../store/channel'
import { storeToRefs } from 'pinia';
const channelStore = useChannelStore()
const { channelId } = storeToRefs(channelStore)
const { changeChannelId } = channelStore
// const channelList = ref<TChannelArr>([])
const channelList: Ref<TChannelArr> = ref([])

const getList = async () => {
  const r = await axios.get<IResponse<{ channels: TChannelArr }>>('http://geek.itheima.net/v1_0/channels')
  channelList.value = r.data.data.channels
  changeChannelId(channelList.value[0].id)
}
getList()

// 获取组件实例，因为 Vue3 没有 this（Vue2 this 就是组件实例）
const glb = getCurrentInstance()?.appContext.config.globalProperties
console.log(glb!.request)
console.log(glb!.a)
console.log(glb!.b)
</script>

<template>
  <ul class="catagtory">
    <li @click="changeChannelId(item.id)" :class="{
      select: channelId === item.id
    }" v-for="item in channelList" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<style scoed lang="less"></style>
